<template>
<div>
  <DialogForm
    v-model="dialogVisible"
    :cancel-button="true"
    :confirm-button="true"
    title="修改用户信息"
    :confirm-loading="confirmLoading"
    @confirm="confirmHandler"
  >
    <template #content>
      <UserBaseForm ref="userBaseForm" v-model="userInfo"/>
    </template>
  </DialogForm>
</div>
</template>

<script>
import { ref } from 'vue'
import { userInfo, userUpdate } from '@/api/user'
import DialogForm from '@/components/dialog/DialogForm'
import UserBaseForm from '@/views/permission/user/form/base/UserBaseForm'
export default {
  name: 'ModifyUserForm',
  components: { UserBaseForm, DialogForm },
  setup () {
    return {
      confirmLoading: ref(false),
      dialogVisible: ref(false),
      userInfo: ref({
        username: '',
        nickname: '',
        email: ''
      }),
      userInfoOld: ref({
        username: '',
        nickname: '',
        email: ''
      })
    }
  },
  methods: {
    handleClose () {
      return null
    },
    confirmHandler () {
      this.$refs.userBaseForm.$refs.modifyUserInfoForm.validate(val => {
        if (val) {
          this.confirmLoading = true
          userUpdate(this.userInfo).then(() => {
            this.userInfoOld.username = this.userInfo.username
            this.userInfoOld.nickname = this.userInfo.nickname
            this.userInfoOld.email = this.userInfo.email
            this.confirmLoading = false
            this.dialogVisible = false
          })
        }
      })
    },
    getUserInfo (userId) {
      this.userInfo = {}
      this.confirmLoading = true
      userInfo(userId).then(value => {
        this.confirmLoading = false
        this.userInfo = value.data
      })
    }
  }
}
</script>

<style scoped>

</style>
